<template>
  <div class="table">
    <h1>table</h1>
    <table>
      <tbody v-html="createTabItem3Table1()"></tbody>
    </table>
    <div style="height: 50px;"></div>
    <table>
      <thead>
      <tr>
        <th>评分大类</th>
        <th>推荐者</th>
        <th>被动者</th>
        <th>贬损者</th>
        <th>总计</th>
        <th>NPS值</th>
        <th>失分结构</th>
        <th>失分原因</th>
        <th>数量</th>
        <th>占比</th>
      </tr>
      </thead>
      <tbody v-html="createTabItem3Table2()"></tbody>
    </table>
  </div>
</template>

<script>

  import response from '@/mock/data'

  export default {
    data() {
      return {}
    },
    computed: {
      table1() {
        return response.data2.data.lastThreeBranchesLoseScoreStatisticsDtos['0'] || []
      },
      table2() {
        const data = response.data2.data.scoreCategoriesLoseScoreStatisticsDtos['1'] || []
        const add = (a, b, isPercent = false) => (parseFloat(a) + parseFloat(b)) + (isPercent ? '%' : 0)
        const subSum = (array) => array.reduce((acc, item) => {
          return {
            loseScoreReson: '--',
            loseScoreResonNum: add(acc.loseScoreResonNum, item.loseScoreResonNum),
            percentage: add(acc.percentage, item.percentage, true)
          }
        }, {loseScoreResonNum: 0, percentage: 0})
        const subtotalList = data.map(item => {
          const reasons = item.scoreCategoriesLoseScoreModels || []
          return subSum(reasons)
        })
        const subtotal = subSum(subtotalList)
        const initValue = {
          presenterNum: 0,
          passivesNum: 0,
          detractorsNum: 0,
          totalNum: 0,
          npsValue: 0,
          loseScoreStructure: 0
        }
        const total = data.reduce((acc, item) => {
          return {
            presenterNum: add(acc.presenterNum, item.presenterNum),
            passivesNum: add(acc.passivesNum, item.passivesNum),
            detractorsNum: add(acc.detractorsNum, item.detractorsNum),
            totalNum: add(acc.totalNum, item.totalNum),
            npsValue: add(acc.npsValue, item.npsValue, true),
            loseScoreStructure: add(acc.loseScoreStructure, item.loseScoreStructure, true)
          }
        }, initValue)
        total.scoreCategories = '总计'
        total.scoreCategoriesLoseScoreModels = [subtotal]
        return data.concat(total)
      }
    },
    created() {
      this.createTabItem3Table1()
      this.createTabItem3Table2()
    },
    methods: {
      // 创建失分情况统计 - 后三分公司失分原因及数量表
      createTabItem3Table1() {
        return this.table1.map(item => {
          const fields = ['loseScoreReson', 'loseScoreResonNum', 'percentage']
          const reasons = item.scoreCategoriesLoseScoreModels || []
          const total = reasons.reduce((acc, item) => {
            return {
              loseScoreReson: '总计',
              loseScoreResonNum: parseInt(acc.loseScoreResonNum) + parseInt(item.loseScoreResonNum),
              percentage: (parseInt(acc.percentage) + parseInt(item.percentage)) + '%',
            }
          })
          const list = reasons.concat(total)
          const rowspan = list.length + 1
          const otherRows = list.map(row => {
            const columns = fields.map(field => `<td>${row[field]}</td>`).join('')
            const rows = `<tr>${columns}</tr>`
            return rows
          }).join('')
          const firstRows = `<tr><td rowspan="${rowspan}">${item.branchCompany}</td><td>失分原因</td><td>数量</td><td>占比</td></tr>`
          return firstRows + otherRows
        }).join('')
      },

      // 创建失分情况统计 - 各评分大类失分结构原因数量统计表
      createTabItem3Table2() {
        const tbFields = [
          'scoreCategories',
          'presenterNum',
          'passivesNum',
          'detractorsNum',
          'totalNum',
          'npsValue',
          'loseScoreStructure'
        ]
        let rowspan = 1
        const result = this.table2.map(item => {
          const fields = ['loseScoreReson', 'loseScoreResonNum', 'percentage']
          const reasons = item.scoreCategoriesLoseScoreModels || []
          rowspan = reasons.length
          const otherRows = reasons.map((row, index) => {
            const columns = fields.map(field => `<td>${row[field]}</td>`).join('')
            const rows = index === 0 ? columns : `<tr>${columns}</tr>`
            return rows
          })
          const firstRowsTds = tbFields.map(field => `<td rowspan="${rowspan}">${item[field]}</td>`).join('') + otherRows.shift()
          const firstRows = `<tr>${firstRowsTds}</tr>`
          return [firstRows].concat(otherRows).join('')
        })
        return result.join('')
      },
    },

  }
</script>

<style lang="scss" scoped>

  .table /deep/ {
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #999;
      padding: 10px;
    }
    h1 {
      text-align: center;
    }
  }


</style>
